<!--
 * @Author: WLang
 * @LastEditors: WLang
 * @Description: 
 * @Date: 2023-07-27 21:51:23
 * @LastEditTime: 2023-07-28 15:00:48
 * @FilePath: \my-wyy\src\components\HotMusic\HotMusic.vue
-->
<template>
  <div class="wyy-hotmusic">
    <div class="wyy-hotmusic-heaer">
        <p class="wyy-hotmusic-text"></p>
        <p class="wyy-hotmusic-time">更新日期 : {{updateTime}}</p>
    </div>
    <ul class="wyy-hotmusic-list">
          <li class="wyy-list-item" v-for="(item, idx) in hotSongs" :key="item.id">
            <router-link :to="{name: 'song', query: {id: item.id}}">
              <MusicItem :songData="songData(item)" :idx="idx" :ishotList="ishotList"/>
            </router-link>
          </li>
    </ul>
    <div class="wyy-hotmusic-footer">
      <p class="wyy-hoymusic-find">查看完整榜单 ></p>
    </div>
  </div>
</template>

<script setup>
import {computed} from 'vue'
import MusicItem from '@/components/MusicItem.vue'
defineProps({
  hotSongs: {
    type: Array,
    default: () => []
  },
  ishotList: {
    type: Boolean
  }
})
const updateTime = computed(() => {
  let date = new Date()
  let month = date.getMonth() + 1
  let day = date.getDate()
  return `${month}月${day}日`
})
const songData = computed(() => {
    return (item) => {
      return {
        id: item.id,
        name: item.name,
        alias: item.alia.length ? item.alia[0] : '',
        sqMusic: item.sq ?? false,
        musicInfo: `${item.ar[0].name} - ${item.name}`
      }
    }
  })

</script>
<style lang="scss" scoped>
  .wyy-hotmusic {
    .wyy-hotmusic-footer {
      text-align: center;
      .wyy-hoymusic-find {
      font-size: 14px;
      color: #a7a7a8;
      line-height: 54px;
    }
    }
    .wyy-hotmusic-heaer {
      width: 100%;
      height: 146px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: url('../../assets/images/hot_music_bg_2x.jpg') no-repeat center/cover;
      .wyy-hotmusic-text {
        width: 150px;
        height: 65px;
        background: url('../../assets/images/index_icon_2x.png') no-repeat -10px -23px/cover;
      }
      .wyy-hotmusic-time {
        margin-left: 15px;
        font-size: 12px;
        margin-top: 10px;
        color: #fff;
      }
    }
  }
</style>